<!--
 * @Author: Zesion Lee
 * @Date: 2025-07-10 10:38:17
 * @Description: 
-->
<template>
  <div id="data2pgBox">
    <div class="pg_config">
      <header>
        数据库参数
        <span>
          <IconPoint
            :style="{ color: pgConfig.status ? '#6d6' : '#d66' }"
            style="margin-right: 2px"
          />
          {{ pgConfig.status == 0 ? '未连接' : '已连接' }}
        </span>
      </header>
      <ul>
        <li>
          <span>Server Host：</span>
          <a-input v-model:value="pgConfig.host" placeholder="Host" />
          <a-input v-model:value="pgConfig.port" style="width: 100px" placeholder="Port" />
        </li>
        <li>
          <span>Username：</span>
          <a-input v-model:value="pgConfig.username" placeholder="Username" />
        </li>
        <li>
          <span>Password：</span>
          <a-input v-model:value="pgConfig.password" placeholder="Password" />
        </li>
        <li>
          <span>Database：</span>
          <a-input v-model:value="pgConfig.database" placeholder="Database" />
        </li>
        <div>
          <a-button type="primary" @click="testDB">连接</a-button>
        </div>
      </ul>
    </div>

    <div class="pg_import">
      <header>数据导入</header>

      <div class="importBody">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="Shp File"><ShpFile :pg-config="pgConfig" /></a-tab-pane>
          <a-tab-pane key="2" tab="Open Gdb" force-render>Content of Tab Pane 2</a-tab-pane>
          <a-tab-pane key="3" tab="WKT String">Content of Tab Pane 3</a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowReactive, toRaw } from 'vue'
import IconPoint from '@/components/icons/IconPoint.vue'
import axios from 'axios'
import type { Res } from '@/http'
import { message } from 'ant-design-vue'

import ShpFile from '@/components/dataImport/ShpFile.vue'

const baseUrl = import.meta.env.VITE_HTTP_BASE_URL

const pgConfig = shallowReactive({
  username: '',
  password: '',
  host: '',
  port: 5432,
  database: '',
  status: 0,
})

const getDbConfig = async () => {
  const res = await axios.get<Res>(`${baseUrl}/db/db-config`)
  const { code, data, msg } = res.data
  if (code == 200 && data.username) {
    Object.assign(pgConfig, data)
  }
}

const testDB = async () => {
  const res = await axios.post<Res>(`${baseUrl}/db/test`, toRaw(pgConfig))
  const { code, msg } = res.data
  if (code == 200) {
    message.success(msg)
    pgConfig.status = 1
  } else {
    message.error(msg)
    pgConfig.status = 0
  }
}

onMounted(getDbConfig)

const activeKey = ref<number>(1)
</script>

<style scoped lang="less">
#data2pgBox {
  padding: 16px;

  header {
    color: #464646;
  }
  .pg_config {
    header {
      display: flex;
      align-items: center;
      span {
        display: inline-flex;
        align-items: center;
        // position: absolute;
        margin-left: 30px;
        font-size: 12px;
      }
    }
    ul {
      margin: 0;
      padding: 0;
      padding: 10px 0 10px 10px;
      width: 100%;
      overflow: hidden;
    }
    li {
      list-style-type: none;
      display: flex;
      float: left;
      width: 20%;
      align-items: center;
      padding: 0 8px;
      span {
        white-space: nowrap;
      }
    }
  }

  .pg_import {
    .importBody {
      padding: 3px 15px;
    }
  }
}
.tip {
  margin: 0;
  padding: 0;
  li {
    white-space: nowrap;
    list-style-type: none;
  }
}
</style>
